<template>
   
        <div class="check-box" style="height:94%;background:#fff;" v-loading="loading">
            <el-row class="photo-row">
                <div class="error-lable"  style="margin:20px 0px;">
                    <div class="label-name">
                        <label>异常相关信息</label>
                    </div> 
                </div>
                <div class="table-abnormal">
                    <el-table
                        :data="[errordetail]"
                        class="table-box"
                        >
                        <el-table-column
                            align="center"
                             prop="address"
                            label="位置描述"
                            width="200">
                        </el-table-column>
                                               <el-table-column  align="center" label="中心坐标">
                            <el-table-column
                                align="center"
                                label="东西方向/X"
                                prop="theGeom"
                                width="100">
                                <template slot-scope="scope">
                                    <div>
                                        <span>{{dealThe_geom(scope.row.theGeom)[0]}}</span>  
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="南北方向/Y"
                                prop="theGeom"
                                width="100">
                                <template slot-scope="scope">
                                    <div>
                                        <span>{{dealThe_geom(scope.row.theGeom)[1]}}</span>  
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column
                            align="center"
                             prop="xsize"
                            label="异常点长/m"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="ysize"
                            label="异常点宽/m"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            align="center"
                             prop="absoluteHeight"
                            label="真实净深(m)"
                            width="150">
                        </el-table-column>
                        <el-table-column
                            align="center"
                             prop="coverHight"
                            label="真实埋深(m)"
                            width="150">
                        </el-table-column>
                        <el-table-column
                            prop="mark"
                            align="center"
                            label="地表现状"
                            >
                        </el-table-column>
                    </el-table>

                    <div class="row-line ">
                        <div class="detail-box image-row">
                            <div class="error-title">
                                初步成因分析
                            </div>
                            <div class="table-text">
                                <el-input
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入内容"
                                    v-model="errordetail.preliminaryCauses">
                                </el-input>
                            </div>
                        </div>
                        <div class="detail-box image-row">
                            <div class="error-title">
                                处置建议
                            </div>
                            <div class="table-text">
                                <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="errordetail.suggestions">
                                </el-input>
                            </div>
                        </div>
                    </div>
            </div> 
            </el-row>
              <el-row  style="height:30%" class="photo-row">
                <div class="error-lable">
                    <div class="label-name">
                        <label>雷达剖面图</label>
                    </div> 
                </div>
                <div class="show-photo">
                    <div class="handleButton" @click="rowLeft" :class="btnOne=='left'?'disableBtn':''">
                        <i class="el-icon-arrow-left"/>
                    </div>
                    <div class="photo-center">
                        <div class="photo-box" :style="{left:leftOne+'px'}">
                            <div  v-for="(img,index) in pou_picList" :key="index" class="box-picture" >
                                <el-image :preview-src-list="[baseUrl+img.fileBinary]"  :src="dealImage(img.fileBinary)" class="errorThree">
                                </el-image>
                                <!-- <span class="layer">第{{img.layer}}层</span> -->
                            </div>
                        </div>
                    </div>
                    <div class="handleButton" @click="rowRight" :class="btnOne=='right'?'disableBtn':''">
                        <i class="el-icon-arrow-right"/>
                    </div>
                </div>
            </el-row>

            <el-row  style="height:30%" class="photo-row">
                <div class="error-lable">
                    <div class="label-name">
                        <label>深度位置图</label>
                    </div> 
                </div>
                <div class="show-photo">
                    <div class="handleButton" @click="rowLeftthree" :class="btnThree=='left'?'disableBtn':''">
                        <i class="el-icon-arrow-left"/>
                    </div>
                    <div class="photo-center">
                        <div class="photo-box" :style="{left:leftThree+'px'}">
                            <div  v-for="(img,index) in Z_picList" :key="index" class="box-picture" >
                                <el-image :preview-src-list="[baseUrl+img.fileBinary]"  :src="dealImage(img.fileBinary)" class="errorThree">
                                </el-image>
                                <!-- <span class="layer">第{{img.layer}}层</span> -->
                            </div>
                        </div>
                    </div>
                    <div class="handleButton" @click="rowRightthree" :class="btnThree=='right'?'disableBtn':''">
                        <i class="el-icon-arrow-right"/>
                    </div>
                </div>
            </el-row>

            <el-row style="height:34%" class="photo-row">
                <div class="error-lable">
                    <div class="label-name">
                        <label>地面关联图片</label>
                    </div> 
                </div>
                <div class="show-photo">
                    
                    <div class="handleButton" @click="rowLefter" :class="btnTwo=='left'?'disableBtn':''">
                        <i class="el-icon-arrow-left"/>
                    </div>
                    <div class="photo-center">
                        <div class="photo-box" :style="{left:leftTwo+'px'}">
                            <el-image v-for="(img,index) in guan_picList" :key="index" :preview-src-list="[baseUrl+img.fileBinary]" :src="dealImage(img.fileBinary)" class="errorThreeTow"></el-image>
                        </div>
                    </div>
                    <div class="handleButton" @click="rowRighter" :class="btnTwo=='right'?'disableBtn':''">
                        <i class="el-icon-arrow-right"/>
                    </div>
                </div>
            </el-row>
            <el-row class="photo-row " style="margin-top:20px">
                <div class="error-lable">
                    <div class="label-name">
                        <label>内窥视频</label>
                    </div> 
                </div>
                <div class="video">
                    <div class="box-video" v-for="(video,index) in videoList" :key="index" >
                        <video-player class="video-player vjs-custom-skin" 
                                ref="videoPlayer" 
                                :playsinline="true" 
                                :options="playerList[index]">
                         </video-player>
                    </div>
                </div>
            </el-row>
            <el-row style="height:34%" class="photo-row">
                <div class="error-lable">
                    <div class="label-name">
                        <label>备注信息</label>
                    </div> 
                </div>
                <div class="rmark">
                    <div class="box-card" v-for="(remark,index) in remarks" :key="index" >
                        <div class="clearfix">
                            <span class="card-header">备注{{index+1}}</span>
                            <span class="text" >提交人：{{remark.createBy}}</span>
                            <span class="text">提交时间：{{remark.createTime}}</span>
                            
                        </div>
                        <div class="text-item">
                            {{remark.remark }}
                        </div>
                    </div>
                </div>
            </el-row>
 
           
        </div>
</template>

<script>
import { saveAs } from 'file-saver'
import { getToken } from "@/utils/auth";
import {  MessageBox } from 'element-ui'
import {getVidoeList,getRemarks,getErrorPhoto} from "@/api/data/proData"
export default {
    name: "project",
    data() {
        return {
        //图片
        imageUrl:"",
        //上传header
        headers:{'GeomativeAuthorization':'Geomative ' + getToken()},
        //图片基本地址
        base_url:'/dev-api',
        //异常状态列表
		stateList: [{
						id:'0',
						name: '未复测',
						disabled: false
					},
					{
						id:'1',
						name: '待验证',
						disabled: false
					},
					{	
						id:'2',
						name: '真异常',
						disabled: false
					},
					{
						id:'3',
						name: '假异常',
						disabled: false
					}],
        //复测方式列表
        verificationList:[
            {
                id:'0',
                name: '空洞',
                disabled: false
            },
            {
                id:'1',
                name: '空脱',
                disabled: false
            },
            {	
                id:'2',
                name: '一般疏松体',
                disabled: false
            },
            {
                id:'3',
                name: '严重疏松体',
                disabled: false
            },
            {
                id:'4',
                name: '富水体',
                disabled: false
            }
        ],
         //备注信息
        remarks:[],
        //剖面图
        pou_picList:[], 
       //Z视图
        Z_picList:[], 
        //关联图
        guan_picList:[],     
        //图片左移距离
        leftOne:0,
        //是否为不可点击样式
        btnOne:"left",
        leftTwo:0,
        btnTwo:"left",
        leftThree:0,
        btnThree:"left",
        //修改详情对话框
        open:false,
        //提交表单
        form: {},
        //弹出对话框名称
        title:'',  
        loading:false,
        //视频播放参数列表
        playerList:[],
        // playerOptions : ,
        //视频列表
        videoList:[]
        };

    },
    props:{
        errordetail:"",
        abnormalType:''
    },
    watch:{
        abnormalType(val){
               this.initPhoto(val) 
        }
    },
    mounted() {
        this.initPhoto(this.abnormalType)
        this.get_remarks()
        this.get_videoList()
    },
    methods: {
        initPhoto(val){
            if(val=="复测更新信息"){
                this.getPouPhoto("1")
                this.getZPhoto("1")
                this.getGuanPhoto("1")    
            }else{
                this.getPouPhoto("2")
                this.getZPhoto("2")
                this.getGuanPhoto("2")   
            }
        },
        //获取剖面图
        getPouPhoto(type){
            let data = {
                id:this.errordetail.abnormalId,
                picType:"P",
                checkType:type
            }
            this.loading = true;
            getErrorPhoto(data).then(
                 response => {
                    if(response.data){
                        this.pou_picList = response.data;
                        this.loading = false;
                    }
                 }
            )
        },
        //获取Z视图
        getZPhoto(type){
            let data = {
                id:this.errordetail.abnormalId,
                picType:"Z",
                checkType:type
            }
            this.loading = true;
            getErrorPhoto(data).then(
                response => {
                    if(response.data){
                        this.Z_picList = response.data
                        this.loading = false;
                    }
                }
            )
        },
        //获取关联图
        getGuanPhoto(type){
            let data = {
                id:this.errordetail.abnormalId,
                picType:"S",
                checkType:type
            }
            this.loading = true;
            getErrorPhoto(data).then(
                response => {
                    if(response.data){
                        this.guan_picList = response.data
                        this.loading = false;
                    }
                }
            )
        },
        // 获取备注信息
        get_remarks(){
            this.loading = true;
            getRemarks(this.errordetail.abnormalId).then(
                 response => {
                    if(response.data){
                        this.remarks = response.data;
                        this.loading = false;
                    }
                 }
            )
        },
        //缩略图获取
        dealImage(val){
            let imagepath= val.split("/")
            imagepath.splice(imagepath.length-1,0,"compress")
            // console.log(imagepath.join("/"))
            return this.baseUrl+imagepath.join("/")
        },
        //获取视频列表
        get_videoList(){
            this.loading = true;
            let data = {"id":this.errordetail.abnormalId}
            let base_url = this.baseUrl
            getVidoeList(data).then(
                response => {
                    if(response.data){
                        this.videoList = response.data;
                        this.videoList.map(item=>{
                            let options = {
                                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                                    autoplay: false, //如果true,浏览器准备好时开始回放。
                                    muted: false, // 默认情况下将会消除任何音频。
                                    loop: false, // 导致视频一结束就重新开始。
                                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                                    language: 'zh-CN',
                                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                                    sources: [{
                                    type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                                    src: base_url+item.fileBinary //url地址
                                    }],
                                    poster: "", //你的封面地址
                                    // width: document.documentElement.clientWidth, //播放器宽度
                                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                                    controlBar: {
                                    timeDivider: true,
                                    durationDisplay: true,
                                    remainingTimeDisplay: false,
                                    fullscreenToggle: true  //全屏按钮
                                    }
                                }
                            
                            this.playerList.push(options )
                            
                        })
                        this.loading = false;
                    }
                 }
            )
        },
        //编辑按钮
        handleUpdateProject(){
            this.form = this.errorDatail;
            this.open = true;
            this.title = "修改异常信息";
        },
        //左移动按钮点击
        rowLeft(){
           if(this.leftOne!=0){
                this.btnOne=""
                this.leftOne=this.leftOne+240;
            } 
            else{
                this.btnOne="left";
            }    
        },
        //右移动按钮点击
        rowRight(){
             let nub= this.pou_picList.length-2
            if(this.leftOne>-240*nub){
                this.btnOne=""
                this.leftOne=this.leftOne-240;
            }
            else{
                this.btnOne="right"
            }
         },   
        //左移动按钮点击
        rowLefter(){
            if(this.leftTwo!=0){
                this.btnTwo=""
                this.leftTwo=this.leftTwo+240;
            } 
            
            else{
                this.btnTwo="left"
            }
        },
        //右移动按钮点击
        rowRighter(){
            let nub= this.guan_picList.length-2
            if(this.leftTwo>-240*nub){
                this.btnTwo=""
                this.leftTwo=this.leftTwo-240;
            }
            else{
                this.btnTwo="right";
            }    
        },
        //左移动按钮点击
        rowLeftthree(){
           if(this.leftThree!=0){
                this.btnThree=""
                this.leftThree=this.leftThree+240;
            } 
            else{
                this.btnThree="left";
            }    
        },
        //右移动按钮点击
        rowRightthree(){
             let nub= this.Z_picList.length-2
            if(this.leftThree>-240*nub){
                this.btnThree=""
                this.leftThree=this.leftThree-240;
            }
            else{
                this.btnThree="right"
            }
         },  

        // 右击按钮
        openMenu(type,tag, e) {
            const menuMinWidth = 105
            const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
            const offsetWidth = this.$el.offsetWidth // container width
            const maxLeft = offsetWidth - menuMinWidth // left boundary
            const left = e.clientX - offsetLeft + 15 // 15: margin right

            if (left > maxLeft) {
                this.left = maxLeft
            } else {
                this.left = left
            }
            this.photoType = type
            this.top = e.clientY-100
            this.tagUrl = tag
            this.visible = true
        },
        //取消右击显示
        closeMenu() {
            this.visible = false
        },
        //处理坐标点
        dealThe_geom(val){
            if(val){
                let coordinate = val.replace('POINT(',"").replace(")","").split(" ")
                return coordinate
            }
            else{
                return ""
            }
        },
        //处理异常状态
        dealState(val){
            if(val){
                let data = this.stateList.filter(item => { return item['id']==val })[0]
                return data.name
            }
            else{
                return ""
            }
        },
       
    }
}
</script>
<style scoped lang="scss">
.row-line{
    margin-top:20px;
    display: flex;
    justify-content:space-between;
    .detail-box{
        width: 48%;
        .error-title{
            height: 40px;
            font-weight: 500;
            color: #222222;
            line-height: 40px;
            font-size: 13px;
            padding-left: 20px;
            text-align: left;
            background: #F5F7FA;
            .title-name{
                width: 50%;
                display: inline-block;
            }
        }
    }
    .detail-box1{
        width: 70%;
        .table-text{
            display: flex;
            ul{
                width: 50%;
                margin: 0px;
                .oneheader{
                    background: #F5F7FA;
                }
                li{
                    border: 1px solid #EBEEF5;
                    height: 40px;
                    font-weight: 500;
                    color: #222222;
                    line-height: 40px;
                    font-size: 13px;
                    text-align: center;
                }
            }
        }
    }
    .detail-box2{
        width: 25%;
        .examples{
            padding: 10px;
        }
    }
}
.video{
    display: flex;
    // justify-content: space-around;
    flex-wrap:wrap;
    .box-video{
    margin-left: 3%;
    display: inline-block;
     margin-top: 20px;
     width: 45%;
    }
}
.table-abnormal{
    padding-left: 30px;
    padding-right: 20px;
}
.rmark{
    text-align: left;
    .box-card{
        margin: 10px 20px 10px 30px;
        border: 1px solid #EDEFF4;
        font-size: 13px;
        .clearfix{
            background: #F5F7FA;
            padding: 10px 24px;
            .card-header{
                position: relative;
                display: inline-block ;
                font-size: 13px;
                padding-right: 20px;
                border-right:1px solid #C7CAD7 ;
            }
            .text{
                margin-left: 20px;
            }
            
        }
        .text-item{
            padding: 20px 24px;
        }

    }
}
.errorCard{
    height:100% ;
}
.errorHrader{
    text-align: left;
    padding: 7px 0;
}
.errorCard ul{
    margin: 0px 0px;
}
.errorDatail .el-card__body{
    padding: 0px 0px;
}
.list-group-item{
    border: none;
    padding: 8px 0px;
}
.list-group-item label{
    display: inline-block;
    width: 35%;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.list-group-item .pull-left{
    margin-left: 2%;
    display: inline-block;
    text-align: left;
    width: 63%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.show-img{
    width: 100%;
    display: flex;
    height: 150px;
    /* background: chartreuse; */
}
.exportError{
    background: white;
    height: 100%;
    display: flex;
    // align-items: center; 
    padding-left: 26px;
    box-shadow: 0px 3px 6px 0px rgba(46, 55, 74, 0.16);
}
.error-lable{
    height:25%;
    display: flex;
    align-items: center; 
    padding-left: 26px;
    position: relative;
}
.label-name:before{
    content: " ";
    position: absolute;
    width: 3px;
    
    display: inline-block;
    height: 16px;
    /* right: -20px; */
    top: 50%;
    transform: translateY(-50%);
    background-color: #5378FF;
}
.label-name label{
    font-weight: bold;
  
    margin-left: 20px;
}
.show-photo{
    padding-left: 26px;
    height: 75%;
    width: 97%;
    display: flex;
}
.handleButton{
    width: 3%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #43454D;
    cursor: pointer;
}
.handleButton:hover{
    background: #9FA2AE;
}
.handleButton i{
    /* height: 20px; */
    font-size: 32px;
    color: white;

}
.disableBtn{
    background: #9FA2AE;
    cursor: not-allowed;
}
.photo-center{
    width: 94%;
    height: 100%;
    display: flex;
    // align-items: center;
    position: relative;
    overflow:hidden;
}
/* 图片 */
.errorThree{
    height: 100%;
    width:220px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    /* display: inline-block; */
    
}
.photo-box{
    position: absolute;
    height: 100%;
    display: inline-block;
    white-space: nowrap;
    padding-right: 20px;
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
    

 
}

.errorThreeTow{
    height: 100%;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    /* width:630px; */
    width:220px;
    margin-left: 20px;
}

.contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
}
.contextmenu li:hover {
    background: #eee;
}
.photo-row{
    padding-right: 10px;
    // display: inline-block; 
}
.box-picture{
    display: inline-block;
    width: 220px;
    height: 188px;
    position: relative;
    margin-left: 20px;
    .layer{
        position: absolute;
        color: white;
        left: 20px;
        padding:2px 5px;
        background: rgba(0, 0, 0, 0.7);
    }
}
.check-box{
    overflow-y: scroll;
}

</style>

